<div class="dis-n clearfix dag-model" >
  <div class="dag-toolbar bor-b bor-t">
    <div class="assist-btn">
      <el-tooltip :content="$t('View variables')" placement="top" :enterable="false">
        <span>
        <el-button
          style="vertical-align: middle;"
          type="primary"
          size="mini"
          class="mar-r-5"
          :disabled="$route.name !== 'projects-instance-details'"
          @click="_toggleView"
          icon="el-icon-c-scale-to-original">
        </el-button>
        </span>
      </el-tooltip>
      <el-tooltip :content="$t('Startup parameter')" placement="top" :enterable="false">
        <span>
          <el-button
            style="vertical-align: middle;"
            type="primary"
            size="mini"
            :disabled="$route.name !== 'projects-instance-details'"
            @click="_toggleParam"
            icon="el-icon-arrow-right">
          </el-button>
        </span>
      </el-tooltip>
      <!-- <span class="name">{{name}}</span> -->
      <!-- &nbsp; -->
      <!-- <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="el-icon-copy-document" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></em></span> -->
    </div>
    <div class="save-btn">
      <div class="operation" style="vertical-align: middle;">
        <a href="javascript:"
            v-for="(item,$index) in toolOperList"
            :class="_operationClass(item)"
            :id="item.code"
            :key="$index"
            @click="_ckOperation(item,$event)">
          <el-tooltip :content="item.desc" placement="top" :enterable="false">
            <span><el-button type="text" class="operBtn" :icon="item.icon"></el-button></span>
          </el-tooltip>
        </a>
      </div>
      <el-tooltip :content="$t('Format DAG')" placement="top" :enterable="false">
        <span>
          <el-button
            type="primary"
            icon="el-icon-caret-right"
            size="mini"
            v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
            style="vertical-align: middle;"
            class="mar-l-5"
            @click="dagAutomaticLayout">
          </el-button>
        </span>
      </el-tooltip>
      <el-tooltip :content="$t('Refresh DAG status')" placement="top" :enterable="false">
        <span>
          <el-button
            style="vertical-align: middle;"
            icon="el-icon-refresh"
            type="primary"
            :loading="isRefresh"
            v-if="type === 'instance'"
            class="mar-l-5"
            @click="!isRefresh && _refresh()"
            size="mini" >
          </el-button>
        </span>
      </el-tooltip>
      <el-button
              v-if="isRtTasks"
              style="vertical-align: middle;"
              type="primary"
              size="mini"
              class="mar-l-5"
              icon="el-icon-back"
              @click="_rtNodesDag" >
        {{$t('Return_1')}}
      </el-button>
      <span>
        <el-button
          type="primary"
          icon="el-icon-switch-button"
          size="mini"
          class="mar-l-5"
          v-if="(type === 'instance' || 'definition') "
          style="vertical-align: middle;"
          @click="_closeDAG">
          {{$t('Close')}}
        </el-button>
      </span>
      <el-button
              style="vertical-align: middle;"
              type="primary"
              size="mini"
              class="mar-l-5"
              :loading="spinnerLoading"
              @click="_saveChart"
              icon="el-icon-document-checked"
              >
        {{spinnerLoading ? 'Loading...' : $t('Save')}}
      </el-button>
      <span>
        <el-button
          style="vertical-align: middle;"
          type="primary"
          size="mini"
          class="mar-l-5"
          :loading="spinnerLoading"
          @click="_version"
          icon="el-icon-info">
          {{spinnerLoading ? 'Loading...' : $t('Version Info')}}
        </el-button>
      </span>
    </div>
  </div>
  <div class="toolbar bor-r">
    <!-- <div class="title"><span>{{name}}</span></div> -->
    <div class="toolbar-btn">
      <div class="bar-box roundedRect jtk-draggable jtk-droppable jtk-endpoint-anchor jtk-connected"
           :class="v === dagBarId ? 'active' : ''"
           :id="v"
           :key="v"
           :title="item.desc"
           v-for="(item,v) in tasksTypeList"
           @mousedown="_getDagId(v)">
        <div class="icos dis-ib" :class="'icos-' + v" ></div>
        <!-- <el-tooltip class="item" effect="dark" :content="item.desc" placement="right"> -->
          <span>{{item.name}}</span>
        <!-- </el-tooltip> -->
      </div>
    </div>
  </div>
  <div class="dag-contect">
    <div class="scrollbar dag-container">
      <div class="jtk-demo" id="jtk-demo">
        <div class="jtk-demo-canvas canvas-wide statemachine-demo jtk-surface jtk-surface-nopan jtk-draggable" id="canvas" ></div>
      </div>
    </div>
    <el-drawer
      append-to-body
      :visible.sync="drawer"
      size=""
      :with-header="false">
      <m-versions :versionData = versionData @mVersionSwitchProcessDefinitionVersion="mVersionSwitchProcessDefinitionVersion" @mVersionGetProcessDefinitionVersionsPage="mVersionGetProcessDefinitionVersionsPage" @mVersionDeleteProcessDefinitionVersion="mVersionDeleteProcessDefinitionVersion" @closeVersion="closeVersion"></m-versions>
    </el-drawer>
    <el-drawer
      append-to-body
      :visible.sync="nodeDrawer"
      size=""
      :with-header="false">
      <m-form-model v-if="nodeDrawer" :nodeData=nodeData @seeHistory="seeHistory" @addTaskInfo="addTaskInfo" @cacheTaskInfo="cacheTaskInfo" @close="close" @onSubProcess="onSubProcess"></m-form-model>
    </el-drawer>
    <el-drawer
      append-to-body
      :visible.sync="lineDrawer"
      size=""
      :wrapperClosable="false"
      :with-header="false">
      <m-form-line-model :lineData = lineData @addLineInfo="addLineInfo" @cancel="cancel"></m-form-line-model>
    </el-drawer>
    <el-drawer
      append-to-body
      :visible.sync="udpDrawer"
      size=""
      :wrapperClosable="false"
      :with-header="false">
      <m-udp></m-udp>
    </el-drawer>
    <el-dialog append-to-body
      :title="$t('Set the DAG diagram name')"
      :visible.sync="dialogVisible"
      width="auto">
      <m-udp ref="mUdp" @onUdp="onUdpDialog" @close="closeDialog"></m-udp>
    </el-dialog>
    <el-dialog append-to-body
      :title="$t('Please set the parameters before starting')"
      :visible.sync="startDialog"
      width="auto">
      <m-start :startData= "startData" :startNodeList="startNodeList" :sourceType="sourceType" @onUpdateStart="onUpdateStart" @closeStart="closeStart"></m-start>
    </el-dialog>
  </div>
</div>